<template>
  <div id="app3">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="back" />
        <div>任务{{rwjbDwType==0?'接收':'下发'}}</div>
      </div>
    </header>
    <div class="main">
      <div class="box">
        <div class="item">
          <div class="item-name">发文单位</div>
          <div class="item-value">{{dataObj.postUnit}}</div>
        </div>
        <div class="item">
          <div class="item-name">类型</div>
          <div class="item-value">{{dataObj.taskType}}</div>
        </div>
        <div class="item">
          <div class="item-name">文件号</div>
          <div class="item-value">{{dataObj.fileNum}}</div>
        </div>
        <div class="item">
          <div class="item-name">任务名称</div>
         <div class="item-value" :class="{'hytz-rwmc':dataObj.taskType=='会议通知'}">{{dataObj.taskName}}</div>
        </div>
        <div class="item hytz-tznr" v-if="dataObj.taskType=='会议通知'">
          <div class="item-name">通知内容</div>
          <div class="item-value">{{getHyContent()}}</div>
        </div>
        <div class="item" v-if="dataObj.taskType=='会议通知'">
          <div class="item-name">回执</div>
          <div class="item-value">{{getSfhz()+getJzrq()}}</div>
        </div>
      </div>

      <div class="box hz-box" v-show="add_flag">
        <div class="item">
          <div class="item-name hz-title">回执</div>
          <div class="item-value"></div>
        </div>
        <div class="boxitem">
          <textarea placeholder="请输入回执内容(500字以内)" v-model="txtbxnr" maxlength="500" ref="count"></textarea>
        </div>
        <ul class="img-box img_upload">
          <div class="img-item radius-m" @click="showPop"></div>
        </ul>
        <ul class="img-box" :class="hz_list_img&&hz_list_img.length > 0 ? 'imgs_uls' : ''">
          <li class="img-item radius-m img-list" :class="{'show-desc':obj.showDesc}" v-for="(obj,i) of hz_list_img"
              :key="i">
            <div class="img-content">
              <img class="img-src img_tu" :src="show_path + obj.path" />
              <div class="img-group">
                <div class="img-btn">
                  <div class="del-btn" @click.stop="del(i,'img')">X</div>
                </div>
                <div class="img-btn">
                  <div class="desc-btn" @click.stop="showHzDesc(i)">A</div>
                </div>
              </div>
            </div>
            <input class="img-desc" type="text" :style="(obj.remark||obj.remark===0) ? 'display: block;' : ''" @click.stop="stopMP"
                   placeholder="请输入描述" v-model="obj.remark" />
          </li>
        </ul>
        <ul class="video-list" v-for="(obj,i) of hz_list_mv">
          <video controls>
            <source :src="show_path+obj.path" type="video/mp4">
            <source :src="show_path+obj.path" type="video/ogg">
            您的浏览器不支持Video标签。
          </video>
          <div class="del" @click.stop="del(i,'mv')"><img src="../../assets/images/delete.png" /></div>
        </ul>
      </div>

      <div class="box hz-box" v-show="show_flag">
        <div class="item hytz-tznr">
          <div class="item-value">{{(txtbxnr||txtbxnr===0)?txtbxnr:'&nbsp;'}}</div>
        </div>
        <ul class="img-box imgs_ul" v-show="hz_list_img&&hz_list_img.length>0">
          <li class="img-item img-list" :class="{'show-desc':obj.remark}" v-for="(obj,ind) of hz_list_img">
            <div class="img-content radius-m">
              <img class="img-src img_tu"  :src="show_path+obj.path" />
            </div>
            <div class="img-desc">{{obj.remark}}</div>
          </li>
        </ul>
        <ul class="video-list" v-for="(obj,i) of hz_list_mv">
          <video controls>
            <source :src="show_path+obj.path" type="video/mp4">
            <source :src="show_path+obj.path" type="video/ogg">
            您的浏览器不支持Video标签。
          </video>
        </ul>
        <div class="main-box yh-dibu">
          <div class="main-box-in">
            <div class="dians-jd">{{hzObj.unitsName}}</div>
            <div class="dians-sq">{{hzObj.recepitName}}</div>
            <div class="dian-rq">{{getDateFormat(hzObj.addtime,'YYYY-MM-DD HH:mm:SS')}}</div>
          </div>
        </div>
      </div>

      <div class="full-width-div" v-for="(item,index) of dataObj.listTask">
        <div class="box box-other" v-if="dataObj.taskType!='会议通知'">
          <div class="item">
            <div class="item-name">具体任务{{index+1}}</div>
            <div class="item-value">{{item.name}}</div>
          </div>
          <div class="item">
            <div class="item-name">周期</div>
            <div class="item-value" v-show="item.cycle==1">按月</div>
            <div class="item-value" v-show="item.cycle==3">按季</div>
            <div class="item-value" v-show="item.cycle==12">按年</div>
              <div class="item-value" v-show="item.cycle==null"></div>
          </div>
          <div class="item">
            <div class="item-name">开始时间</div>
            <div class="item-value">{{getDateFormat(item.startTime,'YYYY年M月D日')}}</div>
          </div>
          <div class="item">
            <div class="item-name">截止时间</div>
            <div class="item-value">{{getDateFormat(item.endTime,'YYYY年M月D日')}}</div>
          </div>
        </div>
        <div class="box box-other" v-for="(obj,ind) of item.taskWorkInfos" v-if="dataObj.taskType!='会议通知'">
          <div class="item">
            <div class="item-name">工作内容</div>
            <div class="item-value">{{obj.name}}</div>
          </div>
          <div class="item">
            <div class="item-name">开始时间</div>
            <div class="item-value">{{getDateFormat(item.startTime,'YYYY年M月D日')}}</div>
          </div>
          <div class="item">
            <div class="item-name">截止时间</div>
            <div class="item-value">{{getDateFormat(obj.time,'YYYY年M月D日')}}</div>
          </div>
        </div>

        <div class="box box-other" v-show="item.content != ''">
          <div class="item hytz-tznr" v-if="dataObj.taskType=='专项任务'">
          <div class="item-value" style="margin-bottom: 0rem;margin-top: 0rem;">{{item.content}}</div>
        </div>
          <div class="item" v-for="(obj,ind) of item.files">
            <div class="item-name">附件{{ind+1}}</div>
            <div class="item-value" @click="showFj(obj)">{{obj.fileName}}</div>
          </div>
        </div>
        <ul class="img-box imgs_ul" v-show="item.img&&item.img.length>0">
          <li class="img-item img-list" :class="{'show-desc':obj.remark}" v-for="(obj,ind) of item.img">
            <div class="img-content radius-m">
              <img class="img-src img_tu"  :src="show_path+obj.filePath" />
            </div>
            <div class="img-desc">{{obj.remark}}</div>
          </li>
        </ul>
        
        <!--<ul class="img-box imgs_ul">
          <li class="img-item img-list show-desc">
            <div class="img-content radius-m">
              <img class="img-src img_tu"  src="44.png" />
            </div>
            <div class="img-desc">333</div>
          </li>
          <li class="img-item img-list show-desc">
            <div class="img-content radius-m">
              <img class="img-src img_tu"  src="44.png" />
            </div>
            <div class="img-desc"></div>
          </li>
          <li class="img-item img-list show-desc">
            <div class="img-content radius-m">
              <img class="img-src img_tu"  src="44.png" />
            </div>
            <div class="img-desc"></div>
          </li>
        </ul>-->

      </div>

      <div style="box-sizing: border-box;padding: 10px;" v-show="add_flag">
        <div class="button" @click="saveHz">确认</div>
      </div>
      <van-popup v-model="btm_show" position="bottom">
        <div v-if="terminal === true" class="btm_tk_item" @click="sp">上传视频</div>
        <div class="btm_tk_item" @click="pz">拍照</div>
        <div class="btm_tk_item btm_tk_item-end" @click="xc">从手机相册选择</div>
        <div class="btm_tk_cancle" @click="btm_show = false">取消</div>
      </van-popup>

    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
import "../../assets/js/zoom.js";
import utils from "../../assets/js/utils.js"
import upload from "../../assets/js/upload_vue.js"
import terminal from "../../assets/js/terminal";
export default {
  name: "ckrw",
  data() {
    return {
      dataObj: {},
      list_img:[],
      list_mv:[],
      id:null,
      type:null,
      show_path:null,
      userId:null,
      username:null,
      rwjbDwType: 0,
      dwid:null,


      add_flag:true,//是否新增回执
      show_flag:true,//是否显示回执
      tsid:null,
      hzObj:{},
      txtbxnr:'',
      hz_list_img:[],
      hz_list_mv:[],
      btm_show:false,
      doing:false,
      terminal: false
    };
  },
  components: {

  },
  destroyed() {
      setTimeout( () => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
  methods: {
    back(){//返回
      // if(this.type=='专项任务'){
      //   this.$router.push("/table_list");
      // }else if(this.type=='会议通知'){
      //   this.$router.push("/table_listhree");
      // }
      this.$router.back()
    },
    getHyContent(){//获取会议通知的通知内容
      var tznr = '';
      if(this.dataObj.listTask&&this.dataObj.listTask.length>0){
        tznr = this.dataObj.listTask[0].content;
      }
      return tznr;
    },
    getSfhz(){//判断是否回执
      var sfhz = '';
      if(this.dataObj.listTask&&this.dataObj.listTask.length>0){
        sfhz = this.dataObj.listTask[0].returnRecpet;
      }
      return sfhz;
    },
    getJzrq(){//获取截止日期
      var dateStr = '';
      if(this.dataObj.listTask&&this.dataObj.listTask.length>0&&this.dataObj.listTask[0].returnRecpet=='是'){
        var jzrq = utils.dateFormat(this.dataObj.listTask[0].endTime,'YYYY-MM-DD');
        dateStr = '(截止日期'+jzrq+')';
      }
      return dateStr;
    },
    getDateFormat(any_date,formatdate){//格式化日期
      return utils.dateFormat(any_date,formatdate);
    },
    checkFjType(info){
      var arr =  ['png','jpg','jpeg','bmp','gif','webp','psd','svg','tiff','txt','pdf','doc','docx','xls','xlsx','pptx'];
      var flag = false;
      if(info&&info.type){
        flag = arr.indexOf(info.type.toLowerCase())!==-1;
      }
      return flag;
    },
    showFj(item){//打开附件
      var path = this.show_path+item.filePath;
      var info = utils.getFileInfo(path);
      console.log(info);
      var flag = this.checkFjType(info);
      if(path&&info.name&&info.type&&info.fileExtension&&flag){
        try{
          var filename = new Date().getTime()+info.fileExtension;
          var waitingObj = plus.nativeUI.showWaiting("正在打开");
          var dtask = plus.downloader.createDownload(path, { filename: '_downloads/' + filename }, function(d, status){
            waitingObj.close();
            // 下载完成
            if(status == 200){
          			plus.runtime.openFile('_downloads/' + filename);
          		} else {
          			 console.log("Download failed: " + status);
          		}
          });
          dtask.addEventListener("statechanged", function (task, status) {
              if (!dtask) { return; }
              switch (task.state) {
                  case 1:
                      waitingObj.setTitle( "正在打开" );
                      break;
                  case 2:
                      waitingObj.setTitle( "正在打开" );
                      break;
                  case 3: // 已接收到数据
                      var progressVal = (task.downloadedSize / task.totalSize) * 100;
                      //psb1.progressbar({ progress: progressVal }).show();
                      //dstatus[0].innerHTML = task.downloadedSize + '/' + task.totalSize;
                      //hui.toast('下载进度：' + (task.downloadedSize + '/' + task.totalSize));
                      var progressStr = Number.parseInt(progressVal)+'% ';
                      console.log(progressStr);
                      waitingObj.setTitle(progressStr);
                      break;
                  case 4:
                      dtask = null;
                      waitingObj.setTitle( "0%" );
                      break;
              }
          });
          dtask.start();
        }catch(e){
          //TODO handle the exception
          console.log(e.message)
        }
      }
    },
    init() {//初始化
      var _this = this;
      var params = {
        userId:_this.userId,
        theNewTaskAssignId:_this.id,
        isPostOrGet: _this.rwjbDwType
      };
      _this.axios.get(_this.$global_msg.Url.host + "/taskAssign/viewsTasks",{
        params:params
      }).then(function (data) {
        console.log('viewsTasks:',data);
        if(data&&data.data){
          if(data.data.code==200){
            _this.dataObj = data.data.rows;
          }else{
            _this.$toast(data.data.msg);
          }
        }else{
          _this.$toast('查询失败');
        }
      }).catch(error => {
          this.$terminal._error(error);
        });
    },
    getHzInfo(){
      var _this = this;
      var params = {
        id:_this.id,
        userid:_this.userId,
        dwid:_this.dwid
      };
      _this.axios.get(_this.$global_msg.Url.host + "/taskAssign/queryTaskAssignById",{
        params:params
      }).then(function (data) {
        console.log('viewsTasks:',data);
        _this.add_flag = false;
        _this.show_flag = false;
        _this.hzObj = {};
        if(data&&data.data){
          if(data.data.code==200){
              if(data.data.rows){
                if(data.data.rows.ishz===0){
                  if(data.data.rows.hz){
                    _this.show_flag = true;
                    _this.hzObj = data.data.rows.hz;
                    _this.txtbxnr = data.data.rows.hz.returnReceiptContent;
                    var hz_list_img = [];
                    var hz_list_mv = [];
                    data.data.rows.mrrFiles.forEach(item => {
                      var obj = item;
                      obj.name = item.fileName;
                      obj.path = item.filePath;
                      if(item.fileType===1){//图片
                        hz_list_img.push(obj);
                      }else if(item.fileType===2){//视频
                        hz_list_mv.push(obj);
                      }else{
                        _this.dataObj.listTask[0].files.push(obj);
                      }
                    });
                    _this.hz_list_img = hz_list_img;
                    _this.hz_list_mv = hz_list_mv;
                  }else{
                    if(_this.rwjbDwType==0){
                      _this.add_flag = true;
                      _this.tsid = data.data.rows.tsid;
                      //测试
                      /*var hz_list_img = [];
                      hz_list_img.push({path:'/WebFiles/img/2020-08-10/a86686f6-f401-46af-8fc3-828f7c061bd51597050811770.jpg',name:'44.jpg'})
                      _this.hz_list_img = hz_list_img;*/
                    }
                  }
                }
              }
          }else{
            if(data.data.code!=300){
              _this.$toast(data.data.msg);
            }
          }
        }else{
          _this.$toast('查询失败');
        }
        _this.$forceUpdate();
      }).catch(error => {
          this.$terminal._error(error);
        });
    },
    showDesc(i) {//显示图片描述
      this.list_img[i].showDesc = !this.list_img[i].showDesc;
      this.$forceUpdate();
    },
    showHzDesc(i) {//显示图片描述
      this.hz_list_img[i].showDesc = !this.hz_list_img[i].showDesc;
      this.$forceUpdate();
    },
    pz() {//拍照
      let that = this;
      that.btm_show = false;
      upload.paizhao(function (path) {
        console.log(path);
        that.uploadImg(path);
      }, function (msg) {
        if (msg !== 'resultCode is wrong') {
          that.$toast(msg);
        }
      });
    },
    xc() {//相册
      let that = this;
      that.btm_show = false;
      upload.xiangce('image', true, function (path) {
        console.log(path);
        path.map(res => {
          that.uploadImg(res);
        })
      }, function (msg) {
        if (msg !== 'User cancelled') {
          that.$toast(msg);
        }
      });
    },
    uploadImg(path) {//上传图片
      let that = this;
      try {
        plus.nativeUI.showWaiting("正在加载...");
      } catch (e) {
        console.log(e.message);
      }
      let params = {};
      var fileInfo = utils.getFileInfo(path);
      upload.uploadImg(that.$global_msg.Url.hosts + '/meetingReturnReceipt/uploadImg', 'POST', params, path, 'multipartFile', function (data) {
        if (data.code == 200) {
          if(!that.hz_list_img){
            that.hz_list_img = [];
          }
          that.hz_list_img.push({
            path: data.rows,
            name:fileInfo.fileName
          })
        } else {
          that.$toast(data.msg);
        }
        that.$forceUpdate();
        try {
          plus.nativeUI.closeWaiting();
        } catch (e) {
          console.log('plus问题');
        }
      }, function (msg) {
        that.$toast(msg);
        try {
          plus.nativeUI.closeWaiting();
        } catch (e) {
          console.log('plus问题');
        }
      });
    },
    sp() {//视频
      let that = this;
      that.btm_show = false;
      upload.record(function (path) {
        console.log(path);
        console.log(typeof path);
        // let a = Array.from(path)
        //获取视频信息
        // a.map(res => {
          plus.io.getVideoInfo({
            filePath:path,
            success:function(data){
              console.log(data);
              console.log(data.duration)
              //视频时间15秒以内才上传
              if((data.duration*1)>11){
                that.$toast('上传的视频时间请在10秒以内');
                return;
              }else{
                that.uploadVideo(path);
              }
            },
            fail:function(e){
              that.$toast(e.msg + '1111111');
            }
          });
        // })
      }, function (msg) {
        if (msg !== 'User cancelled') {
          that.$toast(msg);
        }
      });
    },
    uploadVideo(path) {//上传视频
      let that = this;
      try {
        plus.nativeUI.showWaiting("正在加载...");
      } catch (e) {
        console.log(e.message);
      }
      let params = {};
      var fileInfo = utils.getFileInfo(path);
      upload.uploadVideo(that.$global_msg.Url.hosts + '/meetingReturnReceipt/uploadMV', 'POST', params, path, 'multipartFile', function (data) {
        data = JSON.parse(data);
        if (data.code == 200) {
          if(!that.hz_list_mv){
            that.hz_list_mv = [];
          }
          that.hz_list_mv.push({
            path: data.rows,
            name:fileInfo.fileName
          });
        } else {
          console.log(data);
          that.$toast(data.msg);
        }
        that.$forceUpdate();
        try {
          plus.nativeUI.closeWaiting();
        } catch (e) {
          console.log('plus问题');
        }
      }, function (msg) {
        that.$toast(msg);
        try {
          plus.nativeUI.closeWaiting();
        } catch (e) {
          console.log('plus问题');
        }
      });
    },
    del(i, type) {//删除图片
      if (type == 'img') {
        this.hz_list_img.splice(i, 1);
      } else {
        this.hz_list_mv.splice(i, 1);
      }
      this.$forceUpdate();
    },
    stopMP() {},
    //  下拉框显示
    showPop() {
      this.btm_show = true;
      this.$forceUpdate();
    },
    checkNull(value){//检测是否为空
      if(value||value===0||value==='0'){
        return false;
      }else{
        return true;
      }
    },
    saveHz(){
      var _this = this;
      if(_this.doing){
        return;
      }else{
        _this.doing = true;
      }
      var taskFile = [];
      _this.hz_list_img.forEach(item => {
        var obj = {
          filePath:item.path,
          fileName:item.name,
          remark:item.remark
        };
        taskFile.push(obj);
      });
      _this.hz_list_mv.forEach(item => {
        var obj = {
          filePath:item.path,
          fileName:item.name
        };
        taskFile.push(obj);
      });
      if(_this.checkNull(_this.txtbxnr)){
        _this.$toast('回执内容必填');
        _this.doing = false;
        return;
      }
      if(taskFile.length==0){
        _this.$toast('请上传图片或视频');
        _this.doing = false;
        return;
      }
      var params = {
        taskSpecificId:_this.tsid,
        recepitId:(_this.userId||_this.userId===0)?(_this.userId*1):0,
        recepitName:_this.username,
        taskFiles:taskFile,
        returnReceiptContent:_this.txtbxnr,
        taid:_this.id,
      };
      _this.axios.post(_this.$global_msg.Url.host + "/meetingReturnReceipt/insert",params).then(function (data) {
        console.log('viewsTasks:',data);
        if(data&&data.data){
          if(data.data.code==200){
            _this.$toast({
              message: '保存成功',
              onClose: () => {
                _this.back();
              }
            })
          }else{
            _this.$toast(data.data.msg);
          }
        }else{
          _this.$toast('保存失败');
        }
        _this.doing = false;
      }).catch(error => {
          _this.$terminal._error(error);
        });
    },
    plusReady: function() {}
  },
  beforeCreate() {
    document.addEventListener("plusready", this.plusReady, false);
  },
  beforeRouteLeave(to, from, next) {
      localStorage.removeItem('ckrw_dwid');
      next();
  },
  mounted() {
    var _this = this;
    this.id = this.$route.query.id;
    this.type = this.$route.query.type;
    this.show_path = this.$global_msg.Url.hosts+'';
    this.userId = localStorage.getItem("userId"); //用户id
    this.username = localStorage.getItem('username');
    this.rwjbDwType = localStorage.getItem('rwjbDwType');
    var dwid = localStorage.getItem("ckrw_dwid");
    this.terminal = terminal.terminals().android;
    if(!(dwid||dwid===0)){
      dwid = null;
    }
    this.dwid = dwid;
    //初始化
    this.init();
    this.getHzInfo();

    //物理返回
    // window.addEventListener("popstate", function(){
    //   _this.back();
    // }, false);
  },
  created() {}
};
</script>
<style scoped>
  #app3{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;

    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .btn-add{
    position: absolute;
    right: 0.37037rem;
    font-size: 0.388888rem;
    bottom: 0.462962rem;
  }

  .main {
    box-sizing: border-box;
    background: #f7f7f9;
    flex: 1;
    width: 100%;
    overflow: scroll;
    padding-bottom: 1rem;
  }

  /* 圆角 */
  .radius-b{
    border-radius: 0.222222rem;
  }
  .radius-m{
    border-radius: 0.166666rem;
  }
  .radius-s{
    border-radius: 0.111111rem;
  }

  /* 表单 */
  .box{
    border-radius: 0.222222rem;
    margin-top: 0.12037rem;
    background-color: #FFFFFF;
  }
  .box-other{
    margin-top: 0.185185rem;
  }
  .item{
    width: auto;
   /* height: 1.5rem; */
   padding: 0.462962rem 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px #DDDDDD solid;
    margin-left: 0.277777rem;
    margin-right: 0.185185rem;
  }
  .item .item-name{
    margin-left: 0.185185rem;
    margin-right: 0.69rem;
    width: 2.222222rem;
    color: #000000;
    font-size: 0.388888rem;
  }
  .item .item-value{
    flex: 1;
    margin-right: 0.185185rem;
    color: #a3a3a3;
/*    text-align: right; */
    font-size: 0.388888rem;
 /*   height: 1.388888rem; */
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* 图片列表 */
  .img-box{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-bottom:0.37037rem;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
  }
  .img-box .img-item{
    width: 4.537037rem;
    min-height: 2.833333rem;
    background-image: url('../../assets/images/tianjia.png');
    background-size: 100% 100%;
    margin-top: 0.259259rem;
    margin-bottom: auto;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  /* 图片列表的内容和按钮 */
  .img-box .img-item .img-content{
    width: 100%;
    height: 2.814814rem;
    z-index: 10;
    background-color: #FFFFFF;
    position: relative;
    border: 1px #CCCCCC solid;
    overflow:hidden;
  }
  .img-box .img-item .img-content .img-src{
    width: 100%;
    height: 100%;
    z-index: 11;
  }
  /* 图片列表的描述 */
  .img-box .show-desc{
    /*height: 3.703703rem;*/
    background: none;
  }
  .img-box .img-item .img-desc{
    width: 100%;
    height: 0.851851rem;
    text-align: left;
    flex: 1;
    /*background-color: #f7f7f9;*/
    display: none;
    align-items: center;
    justify-content: flex-start;
  }
  .img-box .show-desc .img-desc{
    display: flex;
  }

  ul,li{
    list-style: none;
    padding: 0;
    margin: 0;
  }


  /* 视频列表 */
  .video-list{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.259259rem;
    margin-bottom:0.37037rem;
    width: auto;
    height: auto;
    display: flex;
    position: relative;
  }
  .video-list video{
    width: 100%;
    height: 4.87037rem !important;
  }
  .video-list .del{
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.925925rem;
    overflow: hidden;
  }
  .video-list .del img{
    width: 100%;
    height: 100%;
  }
  .video-list .del img{
    width: 100%;
    height: 100%;
  }

  .full-width-div{
    width: 100%;
    height: auto;
  }


  /*会议通知*/
  .hytz-rwmc{
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .hytz-tznr{
    height: auto !important;
    align-items: flex-start !important;
    flex-direction: column;
  }
  .hytz-tznr div:first-child{
    margin-top: 0.5rem;
  }
  .hytz-tznr div:last-child{
    margin-bottom: 0.5rem;
  }
  .hytz-tznr .item-name{
    height: auto !important;
    margin-bottom: 0.092592rem;
  }
  .hytz-tznr .item-value{
    height: auto !important;
    margin-left: 0.185185rem;
    width: auto;
    justify-content: flex-start !important;
    text-align: left !important;
  }


  /*按钮*/
  .button {
    width: 100%;
    height: 1rem;
    color: white;
    text-align: center;
    line-height: 1rem;
    /*background-color: #8f8f94;*/
    background-color: #2B6CFE;
    border-radius: 0.105185rem;
  }

  /*回执操作*/
  .hz-title{
    /*font-weight: bold;*/
  }
  .boxitem {
    /* height: 1.3889rem; */
    padding: 0px 0.185185rem;
    font-size: 0.3889rem;
    /*border-bottom: 1Px solid #f2f2f2;*/
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .boxitem textarea {
    width: auto;
    padding-top: 0.3704rem;
    height: 3.125rem;
    overflow: hidden;
    border-bottom: 1Px solid #f2f2f2;
    margin-left: 0.277777rem;
    margin-right: 0.277777rem;
  }
  .popup-box {
    padding: 10px;
  }
  .popup-boxs {
    padding: 0 10px 10px;
  }
  .van-popup {
    background-color: transparent;
  }
  .btm_tk_item {
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #f2f2f2;
    text-align: center;
    margin-left: 0.185185rem;
    margin-right: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
  }
  .btm_tk_item:first-child {
    border-radius: 0.148148rem 0.148148rem 0 0;
  }
  .btm_tk_item-end {
    border-radius: 0 0 0.148148rem 0.148148rem;
  }
  .btm_tk_cancle {
    font-weight: bolder;
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #f2f2f2;
    text-align: center;
    margin: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
    border-radius: 0.148148rem;
  }
  .imgs_uls {
    margin-top: -3.48rem;
    z-index: 2 !important;
  }
  .imgs_uls .img-list:first-child {
    margin-left: 4.74rem;
  }
  .img_upload .img-item {
    z-index: 3 !important;
    margin-top: 0.259259rem !important;
  }
  .hz-box{
    padding-bottom: 0.018518rem;
  }
  .img-group {
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }
  .img-btn {
    height: 100%;
  }
  .del-btn {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 78px;
  }
  .img-box .del-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }
  .img-box .desc-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .main-box {
    display: flex;
    justify-content: space-between;

    width: 100%;
    background-color: #fff;
    flex-direction: column;
  }
  .main-box-in{
    margin: 0 0.185185rem;
    width: auto;
    display: flex;
    padding: 0.462962rem 0.185185rem;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
  }
  .main-box-in .left{
    width: 2rem;
    display: flex;
    align-items: center;
  }
  .main-box-in .right{
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  .main-box-in p{
    color: #999;
  }
  .yh-jzrq .main-box-in,.yh-dibu .main-box-in{
    border-top: 1px solid #ddd;
    border-bottom: none;
  }
  .dians-jd {
    width: 3rem;
    display: flex;
    align-items: center;
  }
  .dians-sq {
    width: 2rem;
    display: flex;
    align-items: center;
  }
  .dian-rq{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #909090;
  }
</style>
